<template>
  <div class="father">
    <button @click="changeSlot">点击切换插槽</button>
    <category>
      <template v-slot:[slotName]="abc">
        <h1>a: {{abc.a}}</h1>
        <hr>
        <h1>b: {{abc.b}}</h1>
      </template>
    </category>
  </div>
</template>

<script setup lang="ts">
import Category from "./category.vue";
import {ref} from 'vue'

let slotName = ref('hello')

function changeSlot() {
  slotName.value = (slotName.value === 'hello') ? 'class' : 'hello'
}
</script>


<script lang="ts">
export default {
  name: ``
}
</script>

<style scoped>
.father {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 100px auto;
  width: 1200px;
  height: 400px;
  border-radius: 20px;
  box-shadow: 1px 1px;
  background: skyblue;
}
</style>